<template>
  <transition name="scale" v-if="hidden">  
    <div class="qr-code">
      <div class="cc">
          <div class='close-wrap'>
             <Icon type="ios-close-outline" @click="close"></Icon>
          </div>      
    
          <qrcode :value="qrcodeUrl" class='pic-wrap'></qrcode>

          <div class='btn-wrap'>
            <Button type="success" class='check-btn' @click="check">我已经付款</Button>
          </div>
      </div>
    </div>
  </transition>
</template>
<script>
  import { Qrcode  } from 'vux'

  export default {
    components: {
      Qrcode
    },
    props: {
      hidden:{
        type: Boolean,
        default: true
      },
      qrcodeUrl: {
        type: String,
        default: '/static/images/404.jpg'
      }
    },
    data() {
      return {
        timer   : null,
        type    : 'scan'
      }
    },
    methods: {
      close() {
        this.$emit('close', this.hidden)
      },
      check() {
        this.$emit('checkPay')
      },
      pay(ids) {
        let t          = this.type
        this.HttpService.H5Pay({type: t, ids: ids}).then(data => {
          let d         = data.data
          if(!data.status) {
            this.qrcodeShow = true
            this.qrcodeUrl  = d.qr_code
            this.timer      = setInterval(() => {
              this.checkPay(d.out_trade_no)
            }, 3000)
          } else {
            this.$Message.error(data.msg)
          }
        })
      },
     checkPay(i) {
        this.HttpService.query({out_trade_no: i}).then(data => {
          let d   = data.data
          if(!data.status && d.trade_status == 'TRADE_SUCCESS') {
            clearInterval(this.timer)
            this.$Message.success(data.msg)
            setTimeout(() => {
              this.qrcodeShow = false
              this.$router.push('/order/lists?status=0')
            }, 1000)
          }
        })
      }
    }
  }
 </script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"
  
  .qr-code
    position: fixed
    z-index: 9999999999
    top: 0
    bottom: 0
    left: 0
    right: 0
    background-color: rgba(0,0,0,.4)
    .cc
      box-sizing: content-box
      position: absolute
      left: 50%
      top: 50%
      padding: 20px
      width: 160px
      height: 160px
      margin: -127px 0 0 -100px
      background-color: #fff
      .pic-wrap, img
        width: 100%
        height: 100%
    .btn-wrap
      position: absolute
      bottom: -52px
      left: 0
      right: 0
      padding: 10px 0
      text-align: center   
      border-top: 2px solid $mc  
      background-color: #fff
    .close-wrap
      position: absolute
      top: -34px
      left: 0
      right: 0
      hh(30px)
      font-size: 30px
      color: #fff  
      text-align: center
      
  .scale-enter-active, .scale-leave-active
    transiti(all, 0.6s, ease)
  .scale-enter
    transform: scale(0)
  .scale-leave
    transform: scale(1)
</style>